<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运行使用日志</title>
    <link rel="stylesheet" type="text/css" href="../../../resource/css/niubility.css"/>
    <style type="text/css">
        .fenBox{
            position: fixed;
            left: 50%;
            top: 78%;
            /*这块不需要设置margin-left: -px; 在分页函数里面写了动态执行的js代码来控制位置*/
        }
        #infoBox td{
            padding: 3px 14px;
        }
        .search_btn{
            display: inline-block;
            padding: 8px 15px;
            margin-left: 6px;
            background:  #009688 ;
            color: #fff;
            font-weight: 400;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            box-shadow: 3px 3px 1px #ccc;
            cursor: pointer;
        }
        /* 提交成功之后，提示消息的位置 */
        .tip_position{
            position: fixed !important;
            left: 50% !important;
            top: 50% !important;
            margin-left: -283px !important;
            margin-top: -80px !important;
            background: rgba(0,0,0,0.7) !important;
            color: #fff3cd !important;
        }
    </style>
    <script src="../../../resource/js/static_url.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../resource/layui/css/layui.css"/>
    <script type="text/javascript" src="../../../resource/layui/layui.js"></script>
</head>
<body>
    <div>
        <input type="text" class="layui-input" style="display:inline-block; width: 210px;" id="equipmentNo" placeholder="请输入编号" />
        <span class="search_btn" id="search_btn">确定</span>
        <span class="search_btn" id="orign_btn">返回初始页面</span>
    </div>
    <table class="layui-table">
        <thead>
        <tr>
            <td>设备名称</td>
            <td>设备编号</td>
            <td>使用者姓名</td>
            <td>开始时间</td>
            <td>结束时间</td>
            <td>存放地点</td>
            <td>备注</td>
        </tr>
        </thead>
        <!-- 数据的改变区域 -->
        <tbody id="infoBox">
        </tbody>
        <!--用来分页的div-->
        <div class="fenBox">
            <div id="pagination1"></div>
        </div>
    </table>
    <script type="text/javascript" src="../../../resource/js/jquery.min.js"></script>
    <!--渲染数据列表js-->
    <script type="text/javascript" src="../../../resource/js/admin_js/admin_log.js"></script>
    <script>
        //（1）调用渲染数据列表: 渲染数据这一套，日志记录是一样的。
        myAjax(admin_runuse_log ,pageNum);

        //根据设备编号：查找使用记录 与 渲染记录列表参数不一样，没法变成一个方法
        function equipmentSearch(urls){
            // 发送Ajax将数据进行渲染
            $.ajax({
                type:'get',
                url: urls,
                dataType: 'json',
                async: true,
                success:function(info){
                    //（1）检验 code!=0 和 data==null
                    if(info.code != 0){
                        layui.use('layer', function(){
                            var layer = layui.layer;
                            layer.msg(info.msg, {skin:'tip_position',time:'3000'});
                        });
                        return;
                    }
                    //（2）字符串拼接
                    var data = info.data.content;
                    var str = "";
                    for(var p in data)
                    {
                        str+=
                            '<tr>'+

                            '<td>'+data[p].equipmentName+'</td>'+
                            '<td>'+data[p].equipmentNo+'</td>'+
                            '<td>'+data[p].userName+'</td>'+
                            '<td>'+data[p].beginDate+'</td>'+
                            '<td>'+data[p].endDate+'</td>'+
                            '<td>'+data[p].place+'</td>'+
                            '<td>'+data[p].remark+'</td>'+
                            '</tr>';
                    }
                    //将数据放进去,这里html()方法每次会都会覆盖前面的内容
                    $("#infoBox").html(str);
                    //（3）进行分页
                    layui.use('laypage', function(){
                        var laypage = layui.laypage;
                        laypage.render({
                            elem: 'pagination1', //所放的div的id ，不用加#号
                            count: info.data.totalCount, //数据总数，从服务端得到
                            limit: info.data.pageSize, //每页显示几条
                            limits:[10],
                            groups: 5, // 连续出现的页码个数
                            curr: info.data.currentPage, //当前页
                            prev:'上一页',
                            next:'下一页',
                            layout:['count','prev', 'page', 'next','limit','limits','skip'],
                            jump:function(obj , first){
                                // 调整分页条目的位置（1）获取宽度（2）设置magrin-left
                                var width_fen = parseInt($(".fenBox").eq(0).css("width"));
                                $(".fenBox").eq(0).css({"margin-left":-width_fen/2+'px'});
                                if(!first)
                                {
                                    //改变分页的 num 数字
                                    equipmentSearch(admin_equipment_runningUse+obj.curr);
                                }
                            }
                        });
                    });
                },
                error:function(){
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('亲，没有查到任何结果', {skin:'tip_position',time:'3000'});
                    });
                }
            });
        }

        // （2.1）单条件查询：--------------点击按钮
        $("#search_btn").click(function(){
            //获取设备编号
            var id = $("#equipmentNo").val();
            //根据某个设备的编号，查找出对应的数据使用编号
            equipmentSearch(admin_equipment_runningUse+id+'/1');
        });

        //（2.2）------------回车键
        document.getElementById("equipmentNo").onkeydown = function(e){
            console.log(e.key);
            if(e.key == 'Enter')
            {
                //获取设备编号
                var id = $("#equipmentNo").val();
                //根据某个设备的编号，查找出对应的数据使用编号
                equipmentSearch(admin_equipment_runningUse+id+'/1');
            }
        };


        //（3）----------返回初始页面
        $("#orign_btn").click(function(){
            // 其实就是重新渲染页面：
            myAjax(admin_runuse_log , '1');
            // 我应该帮助用户清除“ 搜索框内容 ”
            $("#equipmentNo").val("");
        });
    </script>
</body>
</html>